<template>
	<view>
		<view class="card" v-for="(card, index) in list" :key="card.id" @click="cardDetail(card,index)">
			<view class="card_edit" v-if="is_edit">
				<i class="iconfont" 
				:class="card.is_select || false ? 'icon-success-fill' : 'icon-xuanzekuangmoren'"
				:style="card.is_select || false ? 'color: #F0250E;' : ''"></i>
			</view>
			<view
			  class="card-item"
			>
			  <image :src="card.bg_pic_url" mode="aspectFill" />
			  <view class="flex-x-sb flex-y-center">
			    <view class="left flex-y-center">
			      <image :src="card.pic_url" mode="aspectFill" />
			      <view style="margin-left: 20rpx; flex: 1; width: 0">
			        <view
			          class="text-more-1"
			          style="font-size: 34rpx; font-weight: 600"
			          >{{ card.name }}</view
			        >
			        <view style="font-size: 24rpx; margin-top: 8rpx">
			          <text>发放时间：{{ card.sale_time }}</text>
			        </view>
			        <view style="font-size: 24rpx; margin-top: 8rpx">
			          <text v-if="card.date_type == 2">
			            {{ $t("coupon.validity") }}：{{ card.sale_time }}~{{
			              card.end_time
			            }}
			          </text>
			          <text v-else-if="card.date_type == 1 && card.expire_day == 0">
			            {{ $t("user.long") }}
			          </text>
			          <text v-else>
			            {{ $t("facePay.getted") }}{{ card.expire_day
			            }}{{ $t("coupon.date2") }}
			          </text>
			        </view>
			      </view>
			    </view>
			    <view
			      @click.stop="see_card_qrcode(card.id)"
			      class="right flex-col flex-x-center flex-y-center"
			      v-if="card.type == 1 && card.status == 0 && type != 2"
			    >
			      <span class="iconfont icon-QRcode" style="font-size: 6vw"></span>
			      <view style="font-size: 20rpx; margin-top: 10rpx">{{
			        $t("mdAdmin.clerk")
			      }}</view>
			    </view>
			  </view>
			
			  <view
			    class="disable-bg"
			    v-if="
			      (card.type == 5 && card.video_status == 1) ||
			      (card.type != 5 && card.status > 0) ||
			      type == 2
			    "
			  ></view>
			</view>
		</view>
	</view>
	
  
</template>

<script>
export default {
  props: ["type", "is_edit", 'is_all_select', 'list'],
	data() {
		return {
			is_select: false
		}
	},
	computed: {
		iconFont() {
			return (index, is_select)=> {
				if (this.list[index].is_select) {
					return "icon-success-fill";
				}
				return "icon-xuanzekuangmoren";
			}
			
		}
	},
  methods: {
    see_card_qrcode(id) {
      this.$utils.toUrl(
        "/user/write_off_card/card_qrcode/card_qrcode?card_sale_id=" + id
      );
    },
		cardDetail (card,index) {
			let {id,type:card_type,status} = card;
			if (this.is_edit) {
				this.$emit('all_select', card);
			} else {
				if ([1,2,4].some(item => item == card_type)) {
					this.$utils.toUrl(
					        '/user/write_off_card/card-list/detail-card?id=' +
					          id +
					          '&status=' +
					          card_type
					      )
				} 
				
				if(card_type === 3 && parseInt(status) === 0){
					uni.showModal({
						title: "提示",
						content: "确认充值？",
						success: (res) => {
						if (res.confirm) {
							this.$allrequest.coupon
							.verifyExchange({
								sale_id:id,
							})
							.then((res) => {
								if (!res.code) {
								uni.showToast({
									title: "充值成功！",
									duration: 2000,
								});
								this.$emit('callBack',index);
								}
							});
						} else if (res.cancel) {
						}
						},
					});
				}
				if (card_type === 5) {
					this.$utils.toUrl(
					  "/user/write_off_card/card-list/video-card?id=" + id
					);
				}
			}
			
		},
  }
};
</script>

<style lang="less" scoped>
	.card {
		display: flex;
		overflow: hidden;
		.card_edit {
			
			display: flex;
			align-items: center;
			width: 30rpx;
			margin: 24rpx 24rpx 24rpx 0;
			color: #626262;
			.iconfont {
				font-size: 42rpx;
			}
		}
		.card-item {
		  overflow: hidden;
		  position: relative;
		  width: 100%;
		  height: 180rpx;
		  border-radius: 20rpx;
		  margin-bottom: 24rpx;
		  margin-top: 24rpx;
		  background: #d7d7d7;
			flex-shrink: 0;
		  text-shadow: 0px 3rpx 6rpx rgba(0, 0, 0, 0.16);
		  color: #fff;
		  > image {
		    position: absolute;
		    width: 100%;
		    height: 100%;
		  }
		  > view {
		    position: absolute;
		    z-index: 1;
		    width: 100%;
		    height: 100%;
		    padding: 0 24rpx;
		
		    .left {
		      flex: 1;
		      > image {
		        width: 92rpx;
		        height: 92rpx;
		        background: #ffffff;
		        border: 2rpx solid #f1f1f1;
		        opacity: 1;
		        border-radius: 120rpx;
		      }
		    }
		  }
		
		  .disable-bg {
		    width: 100%;
		    height: 100%;
		    background-color: #eeeeee;
		    opacity: 0.6;
		    position: absolute;
		    left: 0;
		    top: 0;
		    z-index: 111;
		  }
		}
	}

</style>
